<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="en">
<head>
    <title>兼容移动端 图片上传</title>
    <meta http-equiv="Content-Type" content="text/html ;charset=utf-8" />
    <!-- import cdn js/css-->
    <%--<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>--%>
    <!-- import cdn js/css-->
    <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/upload/mobile/lrz.bundle.js"></script>

    <link rel="stylesheet" type="text/css" href="../js/upload/iframe/css/upload.css" />
</head>
<body>
<h3 style="margin-top:5%;text-align: center">上传图片测试</h3>

    <!-- Upload file form -->
    <form id="upload-file-form">
        <label for="upload-file-input">上传操作:</label>
        <div  id="btnUp"  class="upload-cover-btn" >选择文件
            <input id="upload-file-input"  type="file" capture="camera" accept="image/*" name="uploadFile"  multiple="multiple"/>
        </div>
        <br/>
    </form>
    <!-- Upload Progress&Message-->
    <hr>
    <div>
        <label>进度:</label>
        <div id="progress_info" class="progress">
            <span></span>
        </div>
    </div>
    <hr>
    <div>
        <label>结果:</label>
        <span id="upload-file-message"></span>
        <div id="img_list"></div>
    </div>
</body>
<script>

 /*   $(function(){
        $('input[name=upload-file-input]').on('change', function(){
            var file=this.files[0];
            lrz(file, {width: 640, width: 500, quality: 0.7,fileName:'uploadFile'}) //fieldName 指定后端接受字段名字
                    .then(function (rst) {
                        console.log(rst.file);
                        console.log($("#upfile")[0]);
                        console.log(rst );

                       /!* $.ajax({
                            url: "/ajax/upload",
                            type: "POST",
                           //data: new FormData(file),
                          //  data: new FormData($('input[name=uploadFile]')[0]),
                          //  data: rst.formData,
                            enctype: 'multipart/form-data',
                            processData: false,
                            contentType: false,
                            cache: false,
                            success: function (data) {
                                // Handle upload success
                                $(".upload_info").text(data.message);
                               // addImage(data);
                            },
                            error: function (data) {
                                // Handle upload error
                                $(".upload_info").text(data.message);
                            }
                        });*!/

                    })
                    .catch(function (err) {
                        alert(err);
                    })
                    .always(function () {

                    });
        });
    });
*/
    //方式二 传文件 xhr方式
    $("#upload-file-input").on("change", function(){
        var file = this.files[0];
        var fd = new FormData();
        fd.append('uploadfile', file, file.name);
        var xhr = new XMLHttpRequest;
        xhr.upload.addEventListener('progress', function (e) {
            if (e.lengthComputable) {
                var percentage = Math.round((e.loaded * 100) / e.total);
                document.getElementById('progress_info').style.backgroundColor="#0785d1";
                document.getElementById('progress_info').style.width = percentage + '%';
            }
        }, false);
        xhr.upload.addEventListener('load', function (e) {
            document.getElementById('progress_info').style.backgroundColor="#0785d1";
            document.getElementById('progress_info').style.width = '100%';
        }, false);
        xhr.onreadystatechange = function (e) {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
                var data = JSON.parse(xhr.responseText);
                addImage(data);
            }
        }
        xhr.open("POST", "/ajax/upload");
        xhr.send(fd);
    });


    //方式二 传base64
   /* $(function(){
        // var input = document.querySelector('input');
        //input.onchange = function () {
        $("#upload-file-input").on("change", function(){
            lrz(this.files[0], {width: 640, width: 500, quality: 0.7}) //fieldName 指定后端接受字段名字
                .then(function (rst) {
                    console.log(rst);
                    $.ajax({
                        url: '/ajax/base64',
                        type: 'post',
                        data: {base64: rst.base64},
                        dataType: 'json',
                        timeout: 200000,
                        success: function (response) {
                            if (response.code == 200) {
                                var $li = $('<li ><img  src='+rst.base64+' alt='+response.data+'></li>');
                                 $li.appendTo($("#img-list"));
                                return true;
                            } else {
                                return alert(response.message);
                            }
                        },

                        error: function (jqXHR, textStatus, errorThrown) {

                            alert(jqXHR.responseText);
                        }
                    });

                })
                .catch(function (err) {
                    alert(err);
                })
                .always(function () {

                });
        });
    });*/


     //add by tomas
     //添加图片
     function addImage(data) {
         //alert(data);
         var images = []; //已经上传的图片列表
         // 优化retina, 在retina下这个值是2
         var ratio = window.devicePixelRatio || 1,thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio;
         if ( data.code != "200" ) return;
         var text ='<div class="img-wrapper"><div class="img-container" style="width: "+thumbnailWidth; height:"+thumbnailHeight>';
         text += '<img width="113px" height="113px"  src="'+data.data+'">';
         text += '<div class="file-opt-box clearfix"><span class="remove">删除</span></div></div></div>';
         var $image =$(text);
         $("#img_list").append($image);
         //删除图片
         $image.find(".remove").on("click", function() {
             try {
                 var src = $(this).parent().prev().attr("src");
                 images.remove(src);
                 $image.remove();
             } catch (e) {console.log(e);}
         });
         images.push(data.data);
         console.log(images);
     }
     if ( Array.prototype.remove == undefined ) {
         Array.prototype.remove = function(item) {
             for ( var i = 0; i < this.length; i++ ) {
                 if ( this[i] == item ) {
                     this.splice(i, 1);
                     break;
                 }
             }
         }
     }


</script>
</body>
</html>